<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  xmlns: shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include::header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
	<div class="col-sm-12">
		<div class="ibox">
			<div class="ibox-body">
				<div class="fixed-table-toolbar">
					<div class="columns pull-left">
						<button type="button"
								class="btn  btn-primary" onclick="add()">
							<i class="fa fa-plus hidden" aria-hidden="true"></i>添加
						</button>
						<button type="button"
								class="btn  btn-danger" onclick="deleteAll()">
							<i class="fa fa-trash hidden" aria-hidden="true"></i>删除
						</button>
						<button type="button"
								class="btn  btn-info" onclick="exportUser()">
							<i class="glyphicon glyphicon-save" aria-hidden="true"></i>&nbsp;导出
						</button>
					</div>
					<div class="columns pull-right">
						<button class="btn btn-success" onclick="reLoad()">查询</button>
					</div>

					<div class="columns pull-right col-md-2 nopadding">
						<input id="searchName" type="text" class="form-control"
							   placeholder="姓名">
						<input id="searchUserName" type="text" class="form-control"
							   placeholder="用户名">
					</div>
				</div>
				<table id="userTable" data-mobile-responsive="true">
				</table>
			</div>
		</div>
	</div>
</div>
<div th:include="include::footer"></div>
</body>
<script>
    $(function(){
        loadData();
    })

	function loadData(){
        $('#userTable')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url : "/sys/user/list", // 服务器数据的加载地址
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 3, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    search : false, // 是否显示搜索框
                    // showColumns : true, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params){//模糊查询

						  params.name=$("#searchName").val();
						  params.username=$("#searchUserName").val();
                           return params;

                    },
                    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
                    // queryParamsType = 'limit' ,返回参数必须包含
                    // limit, offset, search, sort, order 否则, 需要包含:
                    // pageSize, pageNumber, searchText, sortName,
                    // sortOrder.
                    // 返回false将会终止请求
                    columns : [
                        { // 列配置项
                            // 数据类型，详细参数配置参见文档http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
                            checkbox : true
                            // 列表中显示复选框

                        },
                        {
                            field: 'userId',
                            title: 'ID'
                        }
                        ,{
                            field:'username',
                            title:'姓名'
                        },
						{
						    field:'mobile',
						    title:'联系方式'
						},
						{
						    field:'status',
						    title:'状态',
							formatter:function(val,row,index){
                                 var btn='';
                                 if(val==0){
                                     //禁用
									 btn="<span class='btn btn-danger'>禁用</span>"
								 }else{
                                     //正常
                                     btn="<span class='btn btn-success'>正常</span>"
								 }
								 return btn;
							}
						},
						{
                            field:'name',
                            title:'昵称'
                        },{
							field:'email',
							title:'email'
						},{
                            field:'userId',
                            title:'操作',
                            formatter:function(value,item,index){
                                var editBtn='<button type="button" onclick="edit('+value+')"'  +
                                    '\t\t\t\t\t\t\tclass="btn btn-primary">' +
                                    '\t\t\t\t\t\t\t<i class="glyphicon glyphicon-th-list" aria-hidden="true"></i>修改' +
                                    '\t\t\t\t\t\t</button>';
                                var delBtn='<button type="button" onclick="del('+value+')" ' +
                                    '\t\t\t\t\t\t\tclass="btn btn-danger" >' +
                                    '\t\t\t\t\t\t\t<i class="glyphicon glyphicon-remove" aria-hidden="true"></i>删除' +
                                    '\t\t\t\t\t\t</button>';
                                return editBtn+delBtn;
                            }
                        }

                    ]
                });
    }
      function exportUser(){
          location.href="/sys/user/exportUser";
	  }
	function add(){
        layer.open({
            type: 2,
            area: ['900px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/sys/user/add'
        });
	}
	function del(id) {
        $.post(
            "/sys/user/delete",
			{id:id},
			function (data) {
                 if(data.code==200){
                     layer.alert("删除成功");
                     reload();
				 }else{
                     layer.alert("删除失败");

				 }
            },"json"
		)

    }
    function edit(id) {
        layer.open({
            type: 2,
            area: ['900px', '550px'],
            fixed: false, //不固定
            maxmin: true,
            content: '/sys/user/edit/'+id
        });
    }


    function deleteAll(){
        var rows=$('#userTable').bootstrapTable('getSelections');

        var ids=new Array();
        $.each(rows,function(item,i){
            ids.push(i.userId);
        })
        console.log(ids.length);

        if(ids.length<=0){
            layer.alert("请至少选择一条要删除的");
            return ;
        }
        layer.confirm("确定删除么",{btn:["确定","取消"]},function(){

            $.ajax({
                url:"/sys/user/delall",
                data:{ids:ids},
                dataType:"json",
                type:"post",
                success:function(data){

                    if(data.code==200){
                        layer.alert("删除成功");
                        reload();

                    }else{
                        layer.alert("删除失败");
                    }
                }
            })
        })
	}
    function reload(){

        $('#userTable').bootstrapTable("refresh");
    }
</script>
</html>